//所有数据
var data=[
    {id:1,badCode:'GRBL20180319102942698',badState:'提交',reportDepartment:'新生儿小婴儿科',reportTime:'2018-04-15',eventType:'感染病例'},
    {id:2,badCode:'GRBL20180319102942697',badState:'上报存档',reportDepartment:'血液科',reportTime:'2018-04-17',eventType:'医疗医技事件'},
    {id:3,badCode:'GRBL20180319102942699',badState:'上报存档',reportDepartment:'血液科',reportTime:'2018-04-18',eventType:'药物不良反应事件'},
    {id:4,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'血液科',reportTime:'2018-04-19',eventType:'治安管理事件'},
    {id:5,badCode:'GRBL20180319102942699',badState:'上报存档',reportDepartment:'新生儿小婴儿科',reportTime:'2018-04-16',eventType:'治安管理事件'},
    {id:6,badCode:'GRBL20180319102942699',badState:'上报存档',reportDepartment:'康复科',reportTime:'2018-04-17',eventType:'医疗医技事件'},
    {id:7,badCode:'GRBL20180319102942699',badState:'上报存档',reportDepartment:'康复科',reportTime:'2018-04-18',eventType:'医疗医技事件'},
    {id:8,badCode:'GRBL20180319102942699',badState:'提交',reportDepartment:'康复科',reportTime:'2018-04-19',eventType:'治安管理事件'},
    {id:9,badCode:'GRBL20180319102942699',badState:'提交',reportDepartment:'肾脏免疫科',reportTime:'2018-04-16',eventType:'输血不良事件'},
    {id:10,badCode:'GRBL20180319102942699',badState:'提交',reportDepartment:'肾脏免疫科',reportTime:'2018-04-17',eventType:'治安管理事件'},
    {id:11,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'康复科',reportTime:'2018-04-18',eventType:'输血不良事件'},
    {id:12,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'新生儿小婴儿科',reportTime:'2018-04-19',eventType:'药物不良反应事件'},
    {id:13,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'新生儿小婴儿科',reportTime:'2018-04-16',eventType:'输血不良事件'},
    {id:14,badCode:'GRBL20180319102942699',badState:'提交',reportDepartment:'康复科',reportTime:'2018-04-17',eventType:'治安管理事件'},
    {id:15,badCode:'GRBL20180319102942699',badState:'提交',reportDepartment:'肾脏免疫科',reportTime:'2018-04-18',eventType:'药物不良反应事件'},
    {id:16,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'康复科',reportTime:'2022-08-24',eventType:'医疗医技事件'},{id:17,badCode:'GRBL20180319102942699',badState:'上报存档',reportDepartment:'血液科',reportTime:'2022-04-18',eventType:'输血不良事件'},{id:18,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'新生儿小婴儿科',reportTime:'2022-04-12',eventType:'治安管理事件'},{id:19,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'血液科',reportTime:'2020-04-18',eventType:'输血不良事件'},{id:20,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'康复科',reportTime:'2019-04-18',eventType:'医疗医技事件'},
    {id:21,badCode:'GRBL20180319102942699',badState:'提交',reportDepartment:'康复科',reportTime:'2018-04-17',eventType:'治安管理事件'},
    {id:22,badCode:'GRBL20180319102942699',badState:'提交',reportDepartment:'肾脏免疫科',reportTime:'2018-04-18',eventType:'药物不良反应事件'},
    {id:23,badCode:'GRBL20180319102942699',badState:'终止',reportDepartment:'康复科',reportTime:'2022-08-24',eventType:'医疗医技事件'}
]

//当前页码
var page = 1;
//每页条数
var count = 10;
//获取tbody
var oTBody = document.querySelector('tbody');
//获取分页容器
var oPagination = document.querySelector('.pagination');
//获取上一页的按钮
var oPrevBtn = document.querySelector('.previous')
//获取下一页的按钮
var oNextBtn = document.querySelector('.next')

//获取查询按钮
var oInquireBtn=document.querySelector('.btn-inquire')
//获取清除按钮
var oClearBtn=document.querySelector('.btn-clear')
//获取所有查询框
var inquireInp1=document.querySelector('.condition-department')
var inquireInp2=document.querySelector('.condition-number')
var inquireInp3=document.querySelector('.condition-badState')
var inquireInp4=document.querySelector('.condition-reportCard')
var inquireInp5=document.querySelector('.condition-reportTime')
var inquireInp6=document.querySelector('.condition-reportTime1')

//获取不良事件表格
var oBadTable=document.querySelector('.t-information')
//获取不良事件表格关闭按钮
var oBadBtn=document.querySelector('.exit-table')

document.onclick=function(){
    if(event.target.className=='t-clickInfo'){
        oBadTable.style.display='block'
    }
}

oBadBtn.onclick=function(){
    oBadTable.style.display='none'
}




//页面初始化的渲染功能
function render() {
    // 查看所有查询框的内容
    var str1 = inquireInp1.value;//获取查询内容1
    var str2 = inquireInp2.value;//获取查询内容2
    var str3 = inquireInp3.value;//获取查询内容3
    var str4 = inquireInp4.value;//获取查询内容4
    var str5 = inquireInp5.value==''?new Date('2000-8-25').getTime():new Date(inquireInp5.value).getTime();//获取查询内容5
    var str6 = inquireInp6.value==''?new Date():new Date(inquireInp6.value).getTime();//获取查询内容6
    var inquireData = [];//搜索后的数据
    var data1=[];
    var data2=[];
    var data3=[];
    var data4=[];

    console.log(str1);
    if(str1=='---请选择---'){
        data1=data;
    }else{
        data1=data.filter(function(v){
            return v.reportDepartment.includes(str1)
        })
    }
    console.log(data,data1);

    if(str2.trim()==''){
        data2=data1;
    }else{
        data2=data1.filter(function(v){
            return v.reportDepartment.includes(str2)
        })
    }
    console.log(data1,data2);

    if(str3=='---请选择---'){
        data3=data2;
    }else{
        data3=data2.filter(function(v){
            return v.badState.includes(str3)
        })
    }
    console.log(data2,data3);

    if(str4=='---请选择---'){
        data4=data3;
    }else{
        data4=data3.filter(function(v){
            return v.eventType.includes(str4)
        })
    }
    console.log(data3,data4);

    inquireData=data4.filter(function(v){
        var time=new Date(v.reportTime).getTime()
        return time>=str5 && time<=str6
    })

    /* if(str5==''){
        inquireData=data4;
    }else{
        inquireData=data4.filter(function(v){
            return v.reportTime.includes(str5)
        })
    }
    console.log(data4,inquireData); */


//让table为空
    oTBody.innerHTML = '';
//根据count和page准备要渲染的数据
    var renderArr = inquireData.slice((page - 1) * count, page * count);
//循环要渲染的数据
    for (var i = 0; i < renderArr.length; i++) {
    //创建tr
        var oTr = document.createElement('tr');
    //给tr创建内容
        oTr.innerHTML = `
        <td>${renderArr[i].id}</td>
        <td><a class="t-clickInfo">${renderArr[i].badCode}</a></td>
        <td>${renderArr[i].badState}</td>
        <td>${renderArr[i].reportDepartment}</td>
        <td>${renderArr[i].reportTime}</td>
        <td>${renderArr[i].eventType}</td>
        <td>
            <span class="del">删除</span>
        </td>
        `;
    //把tr创建到tbody里面
        oTBody.appendChild(oTr);
    }

    //渲染页码
    //找所有页码
    var aPageBtn = document.querySelectorAll('.pageBtn');

    //删除所有页码
    for (var i = 0; i < aPageBtn.length; i++) {
        oPagination.removeChild(aPageBtn[i].parentNode);
    }

    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(inquireData.length / count); i++) {
        //创建li
        var oLi = document.createElement('li');
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，加一个选中的class
        if (i == page) {
            oLi.classList.add('active');
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}

//删除
oTBody.addEventListener('click', del);
function del() {
    if (event.target.className.includes('del')) {
        //找id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                //删除数据
                data.splice(i, 1);
            }
        }
        render();
    }
}

//查询
oInquireBtn.addEventListener('click', inquireFn);
function inquireFn() {
    page = 1;
    render();
}
//清除
oClearBtn.addEventListener('click', clearFn);
function clearFn() {
    inquireInp1.value='---请选择---';
    inquireInp2.value='';
    inquireInp3.value='---请选择---';
    inquireInp4.value='---请选择---';
    inquireInp5.value='';
    page=1;
    render();
}


//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
    //如果当前点击的按钮有pageBtn这个class名字
    if (event.target.className == 'pageBtn') {
        //修改全局的page
        page = event.target.innerText;
        //渲染table，渲染分页
        render();
    }
}
//给上一页/下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
function prev() {
    if (page > 1) {
        page--;
        render();
    }
}
function next() {
    if (page < Math.ceil(data.length / count)) {
        page++;
        render();
    }
}